<template>
  <a-modal
    :visible="visible"
    title="合同"
    :destroyOnClose="true"
    @cancel="handleCancel"
    :footer="null"
  >
    <a-form :label-col="{span: 6}" :wrapper-col="{span: 16}">
      <a-form-item label="合同名称" style="margin: 0;">
        <p>{{agreement.name}}</p>
      </a-form-item>
      <a-form-item label="合同有效期" style="margin: 0;">
        <p>{{agreement.beginTime}} ~ {{agreement.endTime}}</p>
      </a-form-item>
      <a-form-item label="合同" style="margin: 0;">
        <viewer v-if="pisArr.length > 0" :images="pisArr" :options="{url: 'data-x'}">
          <template v-for="(src, index) in pisArr">
            <img
              style="width:100px;height:100px;margin-right:10px;border:1px solid #eee"
              :src="`${src}?x-oss-process=image/resize,h_100`"
              :data-x="src"
              :key="index"
            />
          </template>
        </viewer>
        <a-list v-if="pdfArr.length > 0">
          <template v-for="(src, index) in pdfArr">
            <a-list-item :key="index">
              <div>
                <a-icon type="link" />
                {{pdfName(src)}} &nbsp;
                <a :href="src" target="_blank">查看</a>
              </div>
            </a-list-item>
          </template>
        </a-list>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import 'viewerjs/dist/viewer.css'
export default {
  name: 'agreement-view-modal',
  props: {
    visible: Boolean,
    agreement: {
      required: true,
      type: Object
    }
  },
  data () {
    return {

    }
  },
  computed: {
    pisArr () {
      if (this.agreement.pictures) {
        const result = this.agreement.pictures.split(',')
        return result.filter(v => !~v.toLowerCase().indexOf('.pdf'))
      }
      return []
    },
    pdfArr () {
      if (this.agreement.pictures) {
        const result = this.agreement.pictures.split(',')
        return result.filter(v => ~v.toLowerCase().indexOf('.pdf'))
      }
      return []
    }
  },
  methods: {
    pdfName (src) {
      if (src && (~src.indexOf('.pdf') || ~src.indexOf('.PDF'))) {
        return src.substring(src.lastIndexOf('/') + 1)
      }
      return false
    },
    handleCancel () {
      this.$emit('set-agview-visible', false)
    }
  }
}
</script>
